<?php
session_start();
if(isset($_SESSION['userNameTaken'])){
	if($_SESSION['userNameTaken'] === 1){
		$userNameTaken = 1;
	}
}
if(isset($_SESSION['emailTaken'])){
	if($_SESSION['emailTaken'] === 1){
		$emailTaken = 1;
	}
}?>
<html>
<head>
	<title>BlackJackX</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
	<script language="Javascript">
		function setEmail(){			
			document.getElementById("email").value = "<?php echo $_POST['email'] ?>";
		}
	
		function checkForm(){
				if(document.getElementById("email").value =="" || document.getElementById("email").value.indexOf("@") == -1){
					alert("Bitte Emailadresse eingeben");
					document.getElementById("email").focus();
					return false;
				} else if(document.getElementById("username").value ==""){
					alert("Bitte Usernamen eingeben");
					document.getElementById("username").focus();
					return false;
				} else if((document.getElementById("passwordOne").value != document.getElementById("passwordTwo").value)){
					alert("Passwörter stimmen nicht überein");
					document.getElementById("passwordOne").focus();
					return false;
				} else if((document.getElementById("passwordOne").value == "") || (document.getElementById("passwordTwo").value == "")){
					alert("Bitte beide Passwortfelder ausfüllen");
					document.getElementById("passwordOne").focus();
					return false;
				} else if((document.getElementById("passwordOne").value.length < 8) || (document.getElementById("passwordTwo").value.length < 8)){
					alert("Passwort muss mind. 8 Zeichen beinhalten");
					document.getElementById("passwordOne").focus();
					return false;
				}	
		}
	</script>
</head>
<body onload="setEmail();" class="regBackground">	
	
		<p>
		<p>
		<form action="createUser.php" onsubmit="return checkForm()" method="post" style="left:30%; width:40%">
			<div style="position:absolute; width:300px; height:200px; left: 43%; top:50%; margin: -150px 0 0 -150px;">
			<div class="regDiv">
			<table align="center" class="refForm">
				<br>
				<tr>
					
					<td>
						E-Mail:
					</td>
					
					<td>
						<input name="email" id="email" type="text" size="15" maxlength="25" onblur="validateEmail()">
					</td>
					 <td style="text-align:right; width:25px; color:red">
						<p id="emailValid" name="emailValid"></p>
					</td>
				</tr>
				<tr>
					
                    <td>
                        Username:
                    </td>
                    
                    <td>
						<input name="username" id="username" type="text" size="15" maxlength="25" onblur="validateUsername()">
					</td>
					<td style="text-align:right; color: red">
						<p id="usernameValid" name="usernameValid"></p>
					</td>
				</tr>
				<tr>
                    
                    <td>
                        Password:    
                    </td>
                    
					<td>
						<input style="25px" name="passwordOne" id="passwordOne" type="password" size="15" maxlength="16" style="height: 25px" onblur="validatePasswordOne()">
					</td>
					<td style="text-align:right; color:red" id="passwordOneValid" name="password1Valid">
					</td>
				</tr>
				<tr>
					
					<td>
                        ..confirm:
					</td>
					
					<td>
						<input style="25px" name="passwordTwo" id="passwordTwo" type="password" size="15" maxlength="16" style="height: 25px" onkeyup="validatePasswordTwo()">
					</td>
					<td style="text-align:right; color:red" id="passwordTwoValid" name="passwordTwoValid">
					</td>
				</tr>
                <tr>
					<td></td>
					
					<td>
						<input name="submit" id="submit" class="buttonKlein" type="submit" style="width: 92px" value="Register" accept-charset="utf-8">
					</td>
				</tr>
			</table>							
		</form>
	</div>
</div>
		<script type="text/javascript">

		
		function validateEmail(){
			var eMailToCheck = document.getElementById("email").value;
			if(eMailToCheck!="" && eMailToCheck.indexOf("@") != -1){
				document.getElementById("emailValid").innerHTML = "";
			}
			else{
				document.getElementById("emailValid").innerHTML = "!";
			}
		}
            
        function validateUsername(){
			var usernameToCheck = document.getElementById("username").value;
			if(usernameToCheck != ""){
				document.getElementById("usernameValid").innerHTML = "";
			}
			else{
				document.getElementById("usernameValid").innerHTML = "!";
			}
		}
            
        function validatePasswordOne(){
			var pwToCheck = document.getElementById("passwordOne").value;
			if(pwToCheck != ""){
				document.getElementById("passwordOneValid").innerHTML = "";
			}
			else{
				document.getElementById("passwordOneValid").innerHTML = "!";
			}
            if(pwToCheck.length < 8 && pwToCheck != ""){
                document.getElementById("passwordOneValid").innerHTML = "8 >";
            }
		}
            
        function validatePasswordTwo(){
			var pwToCheck = document.getElementById("passwordTwo").value;
			if(pwToCheck != document.getElementById("passwordOne").value){
				document.getElementById("passwordTwoValid").innerHTML = "!=";
			}
			else if(pwToCheck == document.getElementById("passwordOne").value){
				document.getElementById("passwordTwoValid").innerHTML = "";
			}
		}
		</script>
		
		<script language="Javascript">
		function validateInformation() {
			var emailTaken = parseInt("<?php echo $emailTaken?>", 10);
			var userNameTaken = parseInt("<?php echo $userNameTaken?>", 10);
			
			if(emailTaken === 1) {
				if(userNameTaken === 1) {
				alert('Email and Username already taken!');
				document.getElementById("email").focus();
				}
				else {
					alert('Email already taken!');
					document.getElementById("email").focus();
				}
			}
			else if(userNameTaken === 1) {
				alert('Username already taken!');
				document.getElementById("username").focus();
			}
		}
		validateInformation();
	</script>
		
</body>
</html>